import React from 'react'
import PropTypes from 'prop-types'
import { Table, Modal, Icon } from 'antd'
import classnames from 'classnames'
import { DropOption } from 'components'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './List.less'

const confirm = Modal.confirm

const List = ({ onDeleteItem, onEditItem, location, onAdd, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const handleMenuClick = (record, e) => {
    switch (e.key) {
      case '1':
        onEditItem(record)
        break
      case '3':
        confirm({
          title: 'Are you sure delete this record?',
          onOk () {
            onDeleteItem(record.id)
          },
        })
        break
      case '2':
        onAdd(record)
        break
      default:
        break
    }
  }
  const columns = [
    {
      title: 'MENUNAME',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: 'MENU_URL',
      dataIndex: 'route',
      key: 'route',
    },
    {
      title: 'ICON',
      dataIndex: 'icon',
      key: 'icon',
      render: (text, record) => {
        return <Icon type={record.icon} />
      }
    },{
      title: 'Operation',
      key: 'operation',
      width: 100,
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: 'Update' }, { key: '2', name: 'AddSub' }, { key: '3', name: 'Delete' }]} />
      },
    },
  ]


  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        scroll={{ x: 700 }}
        columns={columns}
        rowKey={record => record.id}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  onAdd: PropTypes.func,
  location: PropTypes.object,
}

export default List
